import {init} from 'snabbdom/build/package/init'
import {h} from 'snabbdom/build/package/h'
// 导入模块
import {styleModule} from 'snabbdom/build/package/modules/style' // 样式模块
import {eventListenersModule} from 'snabbdom/build/package/modules/eventlisteners' // 事件模块
const patch = init([styleModule,eventListenersModule])

let oldVnode;
let flag = 1; // 1降序 0升序

let list = [{
  name: 'Movie2',
  desc:'Movie2222222～～～',
  no: 2
},{
  name: 'Movie1',
  desc:'Movie11111111～～',
  no:1
},{
  name: 'Movie3',
  desc:'Movie3333333～～～',
  no:3
}
  ]

function renderList(data){
  return data.map((item)=>h('div.movie',`序号 ${item.no}， 名称：《${item.name}》 描述："${item.desc}"`))
}

function clickSort(){
  flag = flag === 1 ? 0: 1;
  console.log(flag)
  const datas = list.sort(function(a, b){
    if(flag === 0){
      return b.no - a.no
    }
    return a.no - b.no
  });
  const newVnode = h('div',[
    h('button',{
      on:{
        click: clickSort
      }
    },'排列'),
    h('div',renderList(datas))
  ])
  patch(oldVnode,newVnode)
}



let vnode = h('div#container.cls', [
  h('button',{
    on:{
      click: clickSort
    }
  },'排列'),
  h('div',renderList(list))
])
oldVnode = vnode;
let app = document.querySelector('#app')

patch(app, vnode)